<template>
	<view>
		<an-nav-bar title="项目详情"> </an-nav-bar>
		<view class="banner" :style="'background-image: url('+ $common.binImage(projectInfo.projectImg) +');'"></view>
		<view class="tabbar bfff flex_sw">
			<view :class="{'check':tabbarId == 0}" @click="tabbarId = 0">服务项目</view>
			<view :class="{'check':tabbarId == 1}" @click="tabbarId = 1">项目详情</view>
			<view :class="{'check':tabbarId == 2}" @click="tabbarId = 2">下单须知</view>
		</view>
		<view class="product" v-show="tabbarId == 0">
			<view class="info bfff">
				<view class="name">{{projectInfo.projectName}}</view>
				<view class="num flex">
					<view class="t1">
						<text>{{projectInfo.sellPrice}}</text>
						<text>元/次</text>
					</view>
					<view class="flex t2">{{projectInfo.serviceTime}}分钟</view>
					<view class="t3">已售{{projectInfo.sellNum}}份</view>
				</view>
				<view class="starData arrow flex" @click="$common.goPage('/pages/s/comment/index?projectId='+id)">
					<view class="star">
						<i v-for="(item,index) in 5" :key="index"></i>
					</view>
					<text class="">5.0</text>
					<text class="">详情</text>
				</view>
			</view>
			<view class="tags flex bfff">
				<view class="title flex bfff">保障</view>
				<view class="tag flex">
					<image src="/static/label_icon.png" mode=""></image>
					<text>平台担保</text>
				</view>
				<view class="tag flex">
					<image src="/static/label_icon.png" mode=""></image>
					<text>官方认证</text>
				</view>
				<view class="tag flex">
					<image src="/static/label_icon.png" mode=""></image>
					<text>收费透明</text>
				</view>
				<view class="tag flex">
					<image src="/static/label_icon.png" mode=""></image>
					<text>爽约包退</text>
				</view>
			</view>
			<view class="technician">
				<view class="item flex" v-for="(item,idx) in projectInfo.technicianList" :key="item.id"
					@click="technicianId = item.id">
					<view class="photo">
						<image class="img" :src="$common.binImage(item.headImg)" mode=""></image>
					</view>
					<view class="info">
						<view class="name flex_sw">
							<view class="t flex">
								<text class="t1">{{item.nickName || '未设置昵称'}}</text>
								<text class="t2">{{item.jobTitle}}</text>
							</view>
							<!-- <view class="b">可预约</view> -->
						</view>
						<!-- <view class="row flex">
							<view class="left flex">
								<i class="icon_order"></i>
								<text>最近接单 2单</text>
							</view>
							<view class="right flex">
								<i class="icon_map"></i>
								<text>20.06km</text>
							</view>
						</view> -->
						<view class="lbl flex">
							<text v-if="item.isAuth"> 实名认证 </text>
							<text v-if="item.isHeadAuth"> 头像认证 </text>
							<text v-if="item.videoAuth"> 视频认证 </text>
						</view>
						<view style="height: 40rpx; line-height: 40rpx; color: #999; font-size: 22rpx; overflow: hidden;">
							<view class="">{{item.personLabel}}</view>
						</view>
					</view>
					<view class="check " :class="{'checked':technicianId == item.id}"></view>
				</view>
			</view>
		</view>
		<view class="newDetail" v-show="tabbarId == 1">
			<view>{{projectInfo.projectDesc}}</view>
		</view>
		<view class="notice" v-show="tabbarId == 2">
			<text class="text">
				1、仅提供专业正规的推拿按摩服务，对于客人不正当的行为和要求，商家和技师有权拒绝服务，并保留诉诸法律的权利，对于客人恶意下单、恶意差评、恶意投诉的行为，商家或平台将对客人拉黑处理，并保留诉诸法律的权利。
				<br>
				2、往返路费由平台代收，白天（08:00~20:00）直线距离3公里范围内免收往返路费，往返路费由打车软件估算，如有异议，以打车凭证为准，多退少补。商家或技师如有额外索取路费可以向平台举报。
				<br>3、客人下单付款后两分钟内商家不能接单，有问题需要咨询的可主动拨打商家电话（订单页面可见）咨询。商家将在客人下单付款后10分钟内确认是否接单，如商家未接单，客人可主动联系商家催单，或选择申请退款，订单款项将原路返回客人账户。
				<br>4、客人下单付款后，商家会联系技师和客人确认订单，对接双方都没有问题才会确认接单，如客人有开票需求，请在商家接单前与商家对接确认，商家一旦接单，客人和商家都不能随意取消订单。
				<br>5、接单后需要取消服务的，将进行扣款或退款处理，订单视为服务完成。
				<br> 　5.1、因商家原因要取消服务的，订单款项由商家全额退还给客人。
				<br> 　5.2、因客人原因要取消服务的，如技师未出发，扣除项目费用的12%作为手续费，剩余款项由商家退还客人。 　
				<br> 　5.3、因客人原因要取消服务的，如技师已出发，扣除项目费用的10%作为手续费，扣除技师往返路费，扣除技师误工费50元，剩余款项由商家退还客人。
				<br>6、商家和技师有权拒绝客人加微信的要求，如客人需要联系商家或技师，可通过电话联系。如商家在未征得客人同意的情况下更换其他技师为客人服务，客人有权申请全额退款。如客人对技师或服务不满意，需要在服务开始前拒绝服务，服务开始后，客人不能以任何理由要求退款。
				<br>7、若技师到达指定预约地点，因客人原因无法开始服务，技师将在等待30分钟后，自行离开视为服务完成，不做任何退款处理；在服务过程中，若因客人原因不得不提前结束服务，将视同本次服务完成，不做任何退款处理。
				<br>8、平台所有服务费用和往返路费都是明码标价，如技师索要小费、路费或其它额外费用，客人有权拒绝（客人主动给予的除外），如遇服务质量问题，或技师未完成服务就提前离开（征得客人同意的除外），可保留相关证据联系商家或平台进行投诉。
				<br>9、为保障你的权益，所有费用请通过平台支付。私自联系商家或技师进行交易的行为，发生财产损失或人身安全等问题与平台无关，后果自负。
			</text>
		</view>
		<view style="height: 140rpx;"></view>
		<view class="bottom flex_center">
			<span @click="gotoUrl(1)">店铺</span>
			<view class="btn" @click="gotoUrl(2)">立即下单</view>
		</view>
		<lw-message ref="lwMessage" />
	</view>
</template>

<script>
	import indexConfig from '@/config/index.config';
	export default {
		data() {
			return {
				id:'',
				tabbarId: 0,
				imgUrl: indexConfig.imgUrl,
				swiperList: [],
				projectInfo: {},
				technicianId: ""
			};
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getProjectDetail(this.id);
		},
		methods: {
			gotoUrl(id) {
				if (id == 2) {
					if (!this.technicianId) {
						this.$refs.lwMessage.show({
							id: "",
							msg: '请选择服务技师',
							type: "warning",
						})
						return
					}
					uni.navigateTo({
						url: `/pages/submitOrder/submitOrder?storeId=${this.projectInfo.storeId}&projectId=${this.projectInfo.id}&technicianId=${this.technicianId}`

					})
				}
				if (id == 1) {
					uni.navigateTo({
						url: `/pages/storeDetail/storeDetail?id=${this.projectInfo.storeId}`
					
					})
				}
			},
			getProjectDetail(id) {
				this.$http.get('/appNoAuth/store/serviceProject/' + id).then(res => {
					this.projectInfo = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom {
		width: 100%;
		height: 120rpx;
		background: #fff;
		box-shadow: 0 -1rpx 10px 0 rgba(0, 0, 0, .1);
		position: fixed;
		left: 0;
		bottom: 0;

		span {
			transform: translateY(6rpx);
			color: #666;
			font-size: 24rpx;
			text-align: center;
			margin-right: 24rpx;

			&:before {
				content: "";
				display: block;
				width: 46rpx;
				height: 42rpx;
				margin-bottom: 4rpx;
				background: url(/static/shop.png) no-repeat;
				background-size: 100% auto;
			}
		}

		view {
			width: 600rpx;
			height: 80rpx;
			background: #aa8050;
			border-radius: 48rpx;
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			line-height: 80rpx;
		}
	}

	.notice {
		line-height: 1.5;
		padding: 20rpx;
		color: #666;
		font-size: 26rpx;
	}

	.newDetail {
		padding: 30rpx 16rpx 96rpx;
		background: linear-gradient(90deg, #fef9ea, #fff5ee);

		.picture {
			width: 100%;
			height: auto;

			image {
				width: 100%;
				height: auto;
			}
		}

		.line {
			padding: 0 6rpx;
			margin-bottom: 26rpx;

			.title {
				color: #a38545;
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 6rpx;
			}

			.font {
				padding-left: 14rpx;
				font-size: 26rpx;
				color: #777;
			}
		}
	}

	.product {
		.technician {
			.item {
				width: 100%;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				background-color: #fff;
				margin-bottom: 10rpx;
				position: relative;

				.check {
					width: 40rpx;
					height: 40rpx;
					border: 2rpx solid #ccc;
					border-radius: 50%;
					box-sizing: border-box;
					position: absolute;
					right: 30rpx;
					top: 50%;
					-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
				}

				.checked {
					background: url(/static/icon_checked.png) no-repeat;
					background-size: 100% auto;
					border: none;
				}

				.info {
					flex: 1;

					.body {
						>view {
							width: 100rpx;
							height: 40rpx;
							line-height: 40rpx;
							text-align: center;
							background: #f9f8f8;
							border-radius: 10rpx;
							color: #666;
							font-size: 22rpx;
							margin-right: 12rpx;
						}
					}

					.lbl {
						color: #666;
						font-size: 20rpx;
						margin-bottom: 10rpx;

						&:before {
							content: "";
							display: block;
							width: 20rpx;
							height: 24rpx;
							background: url(/static/zizhi.png) no-repeat;
							background-size: 100% auto;
							margin-right: 8rpx;
						}
						text {
							padding: 0 10rpx;
						}
					}

					.row {
						margin-bottom: 10rpx;
						font-size: 22rpx;
						color: #666;

						.right {
							.icon_map {
								display: block;
								width: 20rpx;
								height: 24rpx;
								background: url(/static/weizhi.png) no-repeat;
								background-size: 100% auto;
								margin-right: 6rpx;
							}
						}

						.left {
							width: 220rpx;
							height: 44rpx;
							padding: 10rpx 0 10rpx 8rpx;
							margin-right: 6rpx;
							background: url(/static/bg-js.png) no-repeat;
							background-size: 100% auto;
							box-sizing: border-box;


							.icon_order {
								display: block;
								width: 20rpx;
								height: 24rpx;
								margin-right: 10rpx;
								background: url(/static/icon-order.png) no-repeat;
								background-size: 100% auto;
							}
						}
					}

					.name {
						margin-bottom: 6rpx;

						.t1 {
							color: #333;
							font-size: 28rpx;
							margin-right: 30rpx;
						}

						.t2 {
							color: #e9560c;
							font-size: 24rpx;
						}

						.b {
							min-width: 90rpx;
							max-width: 110rpx;
							height: 30rpx;
							line-height: 30rpx;
							text-align: center;
							color: #fff;
							background: #ccc;
							border-radius: 14rpx;
							font-size: 22rpx;
							-webkit-transform: scale(.8);
							transform: scale(.8);
							-webkit-transform-origin: center;
							transform-origin: center;
						}
					}
				}

				.photo {
					width: 180rpx;
					height: 180rpx;
					box-shadow: 0 0 6rpx 0 hsla(0, 0%, 40%, .28);
					border-radius: 50%;
					position: relative;
					margin-right: 30rpx;

					.img {
						width: 180rpx;
						height: 180rpx;
						border-radius: 50%;
					}
				}
			}
		}

		.tags {
			padding: 0 30rpx;
			height: 100rpx;
			margin-bottom: 10rpx;
			background: #fff;
			white-space: nowrap;

			.title {
				color: #333;
				font-size: 30rpx;
				margin-right: 30rpx;
				height: 40rpx;
				line-height: 40rpx;
			}

			.tag {
				width: 180rpx;
				display: flex;
				align-items: center;
				height: 40rpx;

				image {
					width: 28rpx;
					height: 26rpx;
				}

				text {
					color: #AA8050;
					font-size: 22rpx;
					padding-left: 8rpx;
				}
			}
		}

		.info {
			padding: 0 30rpx;
			margin-bottom: 10rpx;
			background: #fff;

			.starData {
				color: #999;
				font-size: 26rpx;
				padding-bottom: 30rpx;

				text {
					display: inline-block;
					color: #999;
					font-size: 26rpx;
					margin-left: 10rpx;
					height: 30rpx;
					line-height: 30rpx;
				}

				.star {
					position: relative;

					i {
						display: inline-block;
						vertical-align: middle;
						width: 28rpx;
						height: 30rpx;
						margin-left: 2rpx;
						background: url(/static/star2.png) no-repeat 50%;
						background-size: 28rpx 26rpx;

					}
				}
			}

			.name {
				font-size: 34rpx;
				color: #333;
				font-weight: 700;
				padding: 22rpx 0 4rpx;
			}

			.num {
				color: #666;
				font-size: 24rpx;
				margin-bottom: 8rpx;

				.t1 {
					color: #e02020;
					font-size: 22rpx;
					margin-right: 30rpx;
				}

				.t2 {
					color: #333;
					margin-right: 40rpx;

					&:before {
						content: "";
						display: block;
						width: 24rpx;
						height: 24rpx;
						background: url(/static/time.png) no-repeat;
						background-size: 100% auto;
						margin-right: 6rpx;
					}
				}

				.t3 {
					font-weight: 400;
				}
			}

			.starData {
				color: #999;
				font-size: 26rpx;
			}
		}
	}

	.tabbar {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
		box-sizing: border-box;
		padding: 0 50rpx;
		color: #666;
		font-size: 30rpx;
		margin-bottom: 4rpx;
		background: #fff;

		>view {
			flex: 1;
			text-align: center;
		}

		.check {
			color: #aa8050;
			font-weight: 700;
		}
	}

	.banner {
		width: 100%;
		height: 270rpx;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% auto;
		overflow: hidden;
	}
</style>
